<template>
 <div>
   <nav-bar>
     <div class="left" slot="left" @click="goBack">
       <i class="iconfont icon-fanhui"></i>
     </div>
     <div slot="center">新用户注册</div>
   </nav-bar>
   <div class="register-container">
     <div class="register-img">
       <van-image
           round
           width="100%"
           height="100%"
           src="https://img01.yzcdn.cn/vant/cat.jpeg"
       />
     </div>
     <div class="register-content">
       <van-form @submit="onSubmit">
         <van-field
             v-model="name"
             name="用户名"
             label="用户名"
             placeholder="用户名"
             :rules="[{ required: true, message: '请填写用户名' }]"
         />
         <van-field
             v-model="email"
             name="邮箱"
             label="邮箱"
             placeholder="邮箱"
             :rules="[{ required: true, message: '请填写邮箱' }]"
         />
         <van-field
             v-model="password"
             type="password"
             name="密码"
             label="密码"
             placeholder="密码"
             :rules="[{ required: true, message: '请填写密码' }]"
         />
         <van-field
             v-model="password_confirmation"
             type="password"
             name="密码"
             label="确认密码"
             placeholder="确认密码"
             :rules="[{ required: true, message: '请填写确认密码' }]"
         />
         <div style="margin: 16px;">
           <div class="link-login" @click="goLogin">
             已有账号，立即登录
           </div>
           <van-button class="button" round block type="info" native-type="submit">注册</van-button>
         </div>
       </van-form>
     </div>
   </div>
 </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import {register} from "../../api/user/user";
import {Notify} from 'vant'
import { Toast } from 'vant';
export default {
  name: "Register",
  components:{
    NavBar
  },
  data(){
    return{
      name:'', // 用户名
      email:'', // 邮箱
      password:'', //密码
      password_confirmation:''//确认密码
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    // 提交注册表单
    async onSubmit(){
      //验证
      if(this.password !== this.password_confirmation){
        Notify({ type: 'danger', message: '两次输入的密码不一致，请重新输入' });
      }else {
        let userInfo = {name:this.name,email:this.email,password:this.password,password_confirmation:this.password_confirmation}
        const res = await register(userInfo)
        console.log(res);
        res.status === 201 ? Toast.success('注册成功！'):Toast.fail('登录失败')
        await this.$router.push({path: '/login'})
        this.name = ''
        this.email = ''
        this.password_confirmation=''
        this.password = ''
      }
    },
    goLogin(){
      this.$router.push({path:'/login'})
    }
  }
}
</script>

<style scoped lang="css">
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
.register-container{
  margin-top: 70px;
  width: 100%;
  height: 100%;
}
.register-img{
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  margin-left: calc(50% - 40px);
}
.register-content{
  margin-top: 20px;
}
.button{
  background-color: #42bBaa;
  border: 1px solid #42bBaa;
}
.link-login{
  font-size: 14px;
  color: #42bBaa;
  margin-bottom: 20px;
}

</style>